<template>
  <div class="login">
    <div class="login-head">
      <img src="../img/logo2.png">
    </div>
    <div class="login-box">
      <!-- <div class="login-box-content"> -->
        <div class="login-pwd" v-if="loginShow">
          <!--<img src="../img/codelogin.png" class="changeLogin" @click="loginShow = false">-->
          <span class="login-tit">账号密码登录</span>
          <div class="login-tit-content" style="margin-top:60px;">
            <div class="input-box">
              <i class="user"></i>
              <el-input
                placeholder="输入用户名"
                v-model="uname"
                type="text"
                @blur="validatempty(uname)">
              </el-input>
            </div>
            <div class="input-box">
              <i class="password"></i>
              <el-input
                placeholder="输入密码"
                v-model="pwd"
                type="password"
                @blur="validatempty(pwd)">
              </el-input>
            </div>
            <p class="p-tip" v-html="tip"></p>
            <el-button @click="login" type="primary">登录</el-button>
          </div>
        </div>
        <!--<div class="login-pwd" v-else>
          <img src="../img/pwlogin.png" class="changeLogin" @click="loginShow = true">
          <span class="login-tit">微信扫码登录</span>
          <div class="login-tit-content" id="login_container" style="margin-top:30px;">
            <img :src="wechatqcode" class="login-code">
            <p class="login-code-tip">若登录失败，请让<span>团队管理员</span>将邀请二维码发给你进行绑定</p>
          </div>
        </div>-->
      </div>

    <div class="login-footer">
      <p>国际金融管理后台@2018</p>
    </div>
  </div>
</template>
<script>
import config from '../utils/config.js'
import axios from 'axios'
import crypt from '../utils/crypto-helper-pkcs7'
export default {
  data () {
    return {
      uname: '',
      pwd: '',
      tip: '',
      wechatqcode: '',
      time: null,
      token: '',
      loginShow: true
    }
  },
  created () {
    let uname = window.sessionStorage.getItem('user')
    if (uname && uname !== '') {
      this.$router.push('/admin/index')
    }
    // 回车登录判断
    var that = this
    document.onkeydown = function (event) {
      var e = event || window.event
      if (e && e.keyCode === 13) {
        let user = window.sessionStorage.getItem('user')
        if (user && user !== '') {
          return false
        } else {
          that.login()
        }
      }
    }
    // this.wechatqcode = config.domain + config.urls.wechat + '?param=aJNhRCy4F5lI2wjGWFaczQ=='
//    this.getcode()
  },
  methods: {
    validatempty (str) {
      if (str === ' ' || str.length === 0) {
        this.tip = '用户名或密码为空'
      } else {
        this.tip = ''
      }
    },
    login () {
      if (this.uname === '' || this.pwd === '') {
        this.tip = '用户名或密码为空'
        return false
      }
      var param = {
        user: this.uname,
        password: this.pwd
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.login + '?param=' + params).then(res => {
        var data = res.data
        if (data.errcode === 200) {
          clearTimeout(this.time)
          window.sessionStorage.setItem('user', data.data.user)
          window.sessionStorage.setItem('identity', data.data.identity)
          this.$router.push('/admin/index')
        } else {
          this.tip = '用户名或密码输入有误'
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    wxlogin () {
      axios.get(config.domain + config.urls.wxlogin + '?token=' + this.token).then(res => {
        var data = res.data
        if (data.errcode === 200) {
          clearTimeout(this.time)
          var pname = data.data.user.replace(/ /g, '+')
          var name = crypt.decrypt(pname)
          var pidentity = data.data.identity.replace(/ /g, '+')
          var identity = crypt.decrypt(pidentity)
          window.sessionStorage.setItem('user', name)
          window.sessionStorage.setItem('identity', identity)
          this.$router.push('/admin/index')
        }
      })
      .catch(error => {
        console.log(error)
      })
      this.time = setTimeout(this.wxlogin, 3000)
    },
    getcode () {
      axios.get(config.domain + config.urls.wechat + '?param=aJNhRCy4F5lI2wjGWFaczQ==').then(res => {
        var data = res.data
        if (data.errcode === 200) {
          this.wechatqcode = data.data.qrcode
          this.token = data.data.token
          this.wxlogin()
        }
      })
      .catch(error => {
        console.log(error)
      })
    }
  }
}
</script>
<style>
.login {
  width: 100%;
  height: 100%;
  background-image: url(../img/loginbg.png);
  background-repeat: repeat;
  position: fixed;
}
.login-head {
  position: absolute;
  z-index: 10;
  top: 0px;
  left: 0;
}
.login-head img {
  width: 272px;
  height: 64px;
  margin-left: 50px;
  margin-top: 22px;
}
.login-box {
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0;
    bottom: 84px;
    background-image: url(../img/loginbg.jpg);
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 100%;
}
.login-pwd {
  position: absolute;
  top: 50%;
  margin-top: -180px;
  left: 60%;
  width: 442px;
  padding: 14px 30px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 4px;
  height: 321px;
}
.login-pwd .changeLogin {
  position: absolute;
  width: 53px;
  height: 53px;
  top: 10px;
  right: 15px;
}
.login-wechat {
  text-align: center;
  width: 66%;
}
.login-wechat img {
  width: 100%;
}
.login-box .login-tit{
  display: block;
  font-size: 24px;
  color: #595757;
}
.login-code {
  width: 200px;
  height: 200px;
}
.login-tit-content .login-code-tip {
  font-size: 14px;
  color: #757474;
  margin-top: 10px;
}
.login-tit-content .login-code-tip span {
  color: #20a0ff;
}
.login-box .el-input {
  margin-left: 66px;
  width: 304px;
}
.login-box .el-input__inner {
  border: none;
}
.login-box .el-button{
  display: block;
  color: #fff;
  background-color: #20a0ff;
  border-color: #20a0ff;
  width: 382px;
  font-size: 18px;
  padding: 13px 15px;
}
.login-box .p-tip{
  margin: 10px;
  color: #cc1d00;
  text-align: left;
  height: 15px;
}
.input-box {
  padding: 5px 0;
  position: relative;
  margin-top: 18px;
  border-radius: 4px;
  border: 1px solid #c4c4c4;
}
.input-box i {
  display: inline-block;
  width: 12px;
  height: 18px;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 15px;
  left: 24px;
  padding-right: 24px;
  border-right: 1px solid #c4c4c4;
}
.input-box i.user {
  background-image: url(../img/uname.png);
  background-repeat: no-repeat;
}
.input-box i.password {
  background-image: url(../img/pwd.png);
  background-repeat: no-repeat;
}
#login_container {
  text-align: center;
}
.login-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  font-size: 14px;
  color: #818181;
  line-height: 1;
  text-align: center;
  height: 84px;
  line-height: 84px;
}
.login-footer span {
  padding: 0 2px;
}
</style>
